<template>
  <div class="bar">
    <h4>{{ title }}</h4>
    <div class="chart">
      <v-chart :force-fit="true" height="312" :data="data" :padding="[24, 0, 0, 0]">
        <v-tooltip/>
        <v-axis/>
        <v-bar position="x*y"/>
      </v-chart>
    </div>
  </div>
</template>

<script>


import axios from "axios";

const data = []
// for (let i = 0; i < 12; i += 1) {
//   data.push({
//     x: `${i + 1}月`,
//     y: Math.floor(Math.random() * 1000) + 200
//   })
// }
const tooltip = [
  'x*y',
  (x, y) => ({
    name: x,
    value: y
  })
]

const scale = [{
  dataKey: 'x',
  min: 2
}, {
  dataKey: 'y',
  title: '时间',
  min: 1,
  max: 22
}]
export default {
  name: 'Bar',
  props: ['title'],
  data() {
    return {

      timer: null,

      data,
      scale,
      tooltip,

    }
  },
  methods: {
    setTimer() {
      if (this.timer == null) {
        this.timer = setInterval(() => {

          axios.get("http://localhost:8080/getLatestByNum/15")
              .then(res => {

                    for (let i = 1; i < 15; i++) {
                      console.log(res.data[i].id);
                      data.push({
                        x: res.data[i].time,
                        y: `${res.data[i].co}%`,
                      })

                    }
                    //this.test1 = res.data.time;
                  }
              );


          this.coverCount++
        }, 5000)
      }
    },
    beforeDestroy() {
      // 每次离开当前界面时，清除定时器
      clearInterval(this.timer)
      this.timer = null
    },

  },
  created() {
    clearInterval(this.timer)
    this.timer = null
    this.setTimer()
  }
}
</script>

<style scoped lang="less">
.bar {
  position: relative;

  .chart {
  }
}
</style>
